import React,{Component} from 'react';
import axios from 'axios';
import './index.css';

class Cinema extends Component {
	constructor(props){
		super(props);
		this.state = {
			ciemaArr:[]
		}
	}
	componentDidMount(){
		axios.get('/v4/api/cinema?__t=1537320073279')
		.then((res)=>{
			console.log(res)
			
			//将一维的数组重组为二维数组
			let oldArr = res.data.data.cinemas;
			let newArr = [];//保存整理后的二维数组
			let k = 0;//区号的序号
			
			for (let item of oldArr){
				//判断区号是否重复
				let repeat = false;//表示不重复
				for (var j = 0;j<newArr.length;j++){
					if(newArr[j].name === item.district.name){//在新的数组中的区号重复了
						repeat = true;
						break;
					}
				}
				//如果不重复
				if(!repeat){
					newArr.push({'id':k,'name':item.district.name,'content':[],'type':false});
					k++
				}
				//将各个区的具体数据放到区的下面
				for(let i = 0;i<newArr.length;i++){
					if(newArr[i].name === item.district.name){//是这个区下面的数据
						newArr[i].content.push(item)
					}
					if(i === 0){//设置第一条数据默认为打开状态
						newArr[i].type = true;
					}
				}
			}
			
			//输出
//			console.log(newArr);
			//把整理好的数据放到state中
			this.setState({
				ciemaArr:newArr
			})
//			console.log(this.state.cinemaArr)
		})
	}
	//点击修改对应的区的状态
	changeType = (id) =>{
//		console.log(id);
		let oldArr = this.state.ciemaArr;
		oldArr[id].type = !oldArr[id].type;
		this.setState({
			ciemaArr:oldArr
		})
	}
    render(){
        return (
            <div className='div1'>
            	{
            		this.state.ciemaArr.map((item)=>
						<div key = {item.id}>
							<div className = 'ciemaquhao' onClick={()=>this.changeType(item.id)}>
							{item.name}
							</div>
							<div style = {item.type?{'display':'block'}:{'display':'none'}}>
								{
									item.content.map((i)=>
										<div className='ciema-item' key = {i.id}>
											<span>
												{i.name}
												<i className="fa fa-angle-right"></i>
											</span>
											<div>{i.address}</div>
											<div>距离未知</div>
										</div>
										
									)
								}
							</div>
						</div>
            		)
            	}
            </div>
        )
    }
}
export default Cinema;